<template>
	<div class="qiudui">
	<div class="say">
		<span>排名</span>
		<span>球队</span>
		<span>场</span>
		<span>胜</span>
		<span>负</span>
		<span>平</span>
		<span>进/失</span>
		<span>积分</span>
	</div>
		<div v-for='i of jifenlist' class="jinqiu">
			<p>{{i.rank}}</p>
			<p>{{i.club_name}}</p>
			<p>{{i.matches_total}}</p>
			<p>{{i.matches_won}}</p>
			<p>{{i.matches_lost}}</p>
			<p>{{i.matches_draw}}</p>
			<p>{{i.goals_pro}}/{{i.goals_against}}</p>
			<p>{{i.points}}</p>
		</div>
	</div>
</template>
<style scoped>
	.qiudui{
		background: #4e524e;
	}
	.say{
	display: flex;
	text-align: center;
	height: 1.066667rem;
	line-height: 1.066667rem;
	font-size: 0.426667rem;
	color: white;
	}
	.say span{
		display: block;
		flex:1;
	}
	.say span:nth-of-type(2){
		flex:2;
	}
	.jinqiu{
		display: flex;
		color: white;
	}
	.jinqiu:nth-of-type(3),.jinqiu:nth-of-type(2),.jinqiu:nth-of-type(4){
		background: green;
	}
	/* .jinqiu:nth-of-type(3)>p:first-of-type,.jinqiu:nth-of-type(2)>p:first-of-type{
		color: orange;
	} */
	p{
		flex:1;
		text-align: center;
		height: 0.8rem;
		line-height: 0.8rem;
		white-space: nowrap;
	}
	p:nth-of-type(2){
		flex:2;
	}
</style>
<script>
	export default {
		data(){
			return {

			}
		},
		computed:{
			jifenlist(){
				return this.$store.state.jifenList.rankings; 
			}
		}
	}
</script>